<template>
  <div>
    <zh-form ref="formRef" style="width: 96%" :md="24" :lg="24" :xl="24" :model="convertInfo" :rules="rules"
             label-width="200px">
      <zh-form-select
          prop="liteflowConvertSourcecode"
          label="源功能接口"
          placeholder="单选"
          allowClear
          :options="state.apiDict"
          @change="getParamTree('source')"
          v-model="convertInfo.liteflowConvertSourcecode"
      ></zh-form-select>
      <zh-form-select
          prop="liteflowConvertSourcetype"
          label="源参数类型"
          placeholder="单选"
          :options="state.dictData.PARAMTYPE"
          @change="getParamTree('source')"
          v-model="convertInfo.liteflowConvertSourcetype"
      ></zh-form-select>
      <zh-form-select
          prop="liteflowConvertSourcefrom"
          label="源参数所属"
          placeholder="单选"
          :options="state.dictData.PARAMFROM"
          @change="getParamTree('source')"
          v-model="convertInfo.liteflowConvertSourcefrom"
      ></zh-form-select>
      <zh-form-item
          label="源接口参数"
          prop="liteflowConvertSourceId"
          v-model="convertInfo.liteflowConvertSourceid"
      >
        <zh-select-tree
            v-model="convertInfo.liteflowConvertSourceid"
            :data="state.sourceTreeList"
            ref="sourceSelect"
            node-key="key"
            :props="{ label: 'value' }"
        >
        </zh-select-tree>
      </zh-form-item>

      <zh-form-select
          prop="liteflowConvertTargetcode"
          label="目标功能接口"
          placeholder="单选"
          allowClear
          :options="state.apiDict"
          @change="getParamTree('target')"
          v-model="convertInfo.liteflowConvertTargetcode"
      ></zh-form-select>
      <zh-form-select
          prop="liteflowConvertTargettype"
          label="目标参数类型"
          placeholder="单选"
          allowClear
          :options="state.dictData.PARAMTYPE"
          @change="getParamTree('target')"
          v-model="convertInfo.liteflowConvertTargettype"
      ></zh-form-select>
      <zh-form-select
          prop="liteflowConvertTargetfrom"
          label="目标参数所属"
          placeholder="单选"
          :options="state.dictData.PARAMFROM"
          @change="getParamTree('target')"
          v-model="convertInfo.liteflowConvertTargetfrom"
      ></zh-form-select>
      <zh-form-item
          label="目标接口参数"
          prop="liteflowConvertTargetId"
          v-model="convertInfo.liteflowConvertTargetid"
      >
        <zh-select-tree
            v-model="convertInfo.liteflowConvertTargetid"
            :data="state.targetTreeList"
            ref="targetSelect"
            node-key="key"
            :props="{ label: 'value' }"
        >
        </zh-select-tree>
      </zh-form-item>
    </zh-form>
  </div>

</template>

<script lang="ts" setup name="ConvertForm">
import {FormInstance} from "element-plus";
import ZhFormItem from "@/components/zh-form-item/index.vue";



const props = defineProps({
  scrollHeight: {
    type: String,
    default: ''
  }
});


const {isTagsview} = storeToRefs($store.theme);

//-------------定义子组件----------------
const convertInfo = ref<any>({
  liteflowConvertSourcefrom:'body',
  liteflowConvertTargetfrom:'body',
});
const sourceSelect = ref<any>({});
const targetSelect = ref<any>({});

const formRef = ref<FormInstance>();
const rules = reactive({
  liteflowConvertSourcecode: [
    {
      required: true,
      message: '请选择源功能接口',
      trigger: 'blur',
    },
  ],
  liteflowConvertSourcetype: [
    {
      required: true,
      message: '请选择源参数类型',
      trigger: 'blur',
    },
  ],
  liteflowConvertSourceid: [
    {
      required: true,
      message: '请选择源接口参数',
      trigger: 'blur',
    },
  ],
  liteflowConvertTargetcode: [
    {
      required: true,
      message: '请选择目标功能接口',
      trigger: 'blur',
    },
  ],
  liteflowConvertTargettype: [
    {
      required: true,
      message: '请选择目标参数类型',
      trigger: 'blur',
    },
  ],
  liteflowConvertTargetid: [
    {
      required: true,
      message: '请选择目标接口参数',
      trigger: 'blur',
    },
  ],

});

const state = reactive({
  apiDict:[],
  dictData:{},
  sourceTreeList:[],
  targetTreeList:[]
});

onMounted(() => {
  state.apiDict=$store.serviceFlow.funcCodeMap;
})

//-----------------自定义方法------------
function setInitDate(info) {
  formRef.value?.resetFields();
  if (info) {
    convertInfo.value = info;
    getParamTree('source');
    getParamTree('target');
  }
}
function getParamTree(type){
  let params={}
  if(type=="source"){
    params={
      functionCode:convertInfo.value.liteflowConvertSourcecode,
      paramType:convertInfo.value.liteflowConvertSourcetype,
      paramFrom:convertInfo.value.liteflowConvertSourcefrom
    }
  }
  if(type=="target"){
    params={
      functionCode:convertInfo.value.liteflowConvertTargetcode,
      paramType:convertInfo.value.liteflowConvertTargettype,
      paramFrom:convertInfo.value.liteflowConvertTargetfrom
    }
  }

  $api.common.send.post('APIPARAMS0007', params).then((res) => {
    if(type=="source"){
      state.sourceTreeList = res.result.treeList;
      convertInfo.liteflowConvertSourceid=''
      sourceSelect.value.setCurrentKey(null);

    }
    if(type=="target"){
      state.targetTreeList = res.result.treeList;
      convertInfo.liteflowConvertTargetid=''
      targetSelect.value.setCurrentKey(null);
    }

  });
}





const params = {
  dictFields: 'PARAMTYPE,PARAMFROM',
};
$api.common.getBatchDict.post(params).then((res) => {
  state.dictData = res.result;
});


defineExpose({setInitDate, form: formRef, convertInfo});
</script>
